<template>
  <div class='wrap' ref="wrap">
      <ul class='list' ref='list'>
         <li 
            class='item' 
            v-for="item of letters" 
            :key="item"
            :ref="item"
            @click="handleLetterClick"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
         >
             {{item}}
         </li>
      </ul>
  </div>
</template>
<script>
export default {
    name:"CityAlphabet",
    props:{
        list:Object,
        letter:String
    },
    data (){
        return{
            startY:0,
            endY:0,
            touchStatus:false,
            prevScrollH:0,
            timer:null,
            startTop:0
        }
    },
    updated (){
        this.startTop=this.$refs['A'][0].clientHeight
    },
    computed:{
        letters (){
            const letters=[];
            for(let i in this.list){
                letters.push(i)
            }
            return letters
        }
    },
    methods:{
        handleLetterClick (e){
            const letter=e.target.innerHTML
            this.$emit("change",letter)
        },
        handleTouchStart (e){
                this.touchStatus=true
            let touch = e.targetTouches[0];
                this.startY=touch.pageY
        },
        handleTouchMove (e){
            const _this=this;
            if(this.touchStatus){
                if(this.timer){
                     clearTimeout(this.timer)
                }
                this.timer=setTimeout(()=>{
                    const h=this.startTop
                    let touch = e.targetTouches[0];
                        this.endY=touch.pageY
                    let moveY=this.endY-this.startY;
                    let num=0;
                    if(moveY<0){
                            num=Math.floor((Math.abs(moveY)+this.prevScrollH)/h)
                        }else{
                            num=Math.floor((this.prevScrollH-moveY)/h)
                    }
                    if(num<0){
                    num=0
                    }else if(num>this.letters.length){
                    num=this.letter.length
                    }
                    this.$emit("change",this.letters[num])
                },16)
            }
        },
        handleTouchEnd (e){
            this.touchStatus=false
            this.prevScrollH=this.$refs["wrap"].scrollTop
        }
    },
    mounted (){
    }
}
</script>
<style lang="scss" scoped>
@import "~styles/_parameters.scss";
    .wrap{
        position:absolute;
        top:1.72rem;
        right:0;
        bottom:0;
        width:.4rem;
        overflow-y:auto;
        display:flex;
        flex-direction:column;
        justify-content: center;
    }
    .list{
        min-height:0;
        min-width:0;
        font-size:small;
        .item{
            line-height:.38rem;
            text-align:center;
            color:$bgColor;
        }
    }
</style>